<template>
    <div>
        <van-nav-bar title="排行榜" left-text="返回" fixed left-arrow >
     <template #left>
    <van-icon name="arrow-left" size="18" color="black" @click="back()"/>
  </template>
  
</van-nav-bar>

<van-tabs v-model="active" title-active-color="red">
  <van-tab title="新品特卖榜">
    <div class="goods">
        <div class="good" v-for="item in list" :key="item.id" @click="addCart(item.id)">
          <img :src="item.picture" alt="">
          <div class="goodRight">
            <h5>{{item.shop}}</h5>
            <p>{{item.shop}}</p>
            <span>￥{{item.price}}</span>
            <div>
              销售热度79%
            </div>
          </div>
        </div>
        
    </div>
  </van-tab>
  <van-tab title="商品好评榜">
     <div class="good" v-for="item in list.slice(0,2)" :key="item.id">
          <img :src="item.picture" alt="">
          <div class="goodRight">
            <h5>{{item.shop}}</h5>
            <p>{{item.shop}}</p>
            <span>￥{{item.price}}</span>
            <div>
              销售热度79%
            </div>
          </div>
     </div>
  </van-tab>
  <van-tab title="当季热卖榜">
    <div class="good" v-for="item in list.slice(0,3)" :key="item.id">
          <img :src="item.picture" alt="">
          <div class="goodRight">
            <h5>{{item.shop}}</h5>
            <p>{{item.shop}}</p>
            <span>￥{{item.price}}</span>
            <div>
              销售热度79%
            </div>
          </div>
     </div>
  </van-tab>

</van-tabs>
    </div>
</template>

<script>

import Vue from 'vue';
import { NavBar } from 'vant';
Vue.use(NavBar);
import { ShareSheet } from 'vant';
Vue.use(ShareSheet);
import { Tab, Tabs } from 'vant';
Vue.use(Tab);
Vue.use(Tabs);
export default {
     data() {
    return {
      active: 0,
      list:[]
    };
  },
  methods: {
    back:function(){
      this.$router.go(-1)
    },
    addCart:function(id){
     this.$router.push({path:`/detail/${id}`})
    }
  },
  created () {
    this.list=this.$store.getters.getRank
  }
}
</script>

<style scoped lang="scss">
.van-tab__pane{
    padding:0 1.25rem;
}
.good{
   height: 10.875rem;
    border-bottom: 1px solid #e3e3e3;
    padding-top: 1rem;

    img{
     width: 8.625rem;
      float: left;
      height: 8.625rem;

    }
    .goodRight{
     width: 11.5rem;
      float: right;
      height: 100%;
      text-align: left;
      padding-top: 0.625rem;
      h5{
        font-size: 1.125rem;
    margin-bottom: 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
      }
      p{
        font-size: 0.875rem;
        color: #aeaeae;
    margin-bottom: 0.625rem;
  font-size: 1rem;
      }
      span{
        font-size: 1.125rem;
        color: red;
      }
      div{
        width: 7.625rem;
        height: 2.25rem;
        background-color: #fff2f3;
        border: 1px solid #ff334f;
        color: #ff334f;
        border-radius: 0.3125rem;
        text-align: center;
        line-height: 2.25rem;
        margin-top: 1rem;
      }

    }
}
</style>